{extend name="public/layout" /}
{block name="pluginsCss"}{/block}
{block name="style"}
<style>
    .windowForm {
        padding: 20px;
        display: none;
    }

    .windowForm p {
        font-size: 14px;
        text-align: left;
        color: #858585;
    }

    .windowForm input.longInput {
        display: block;
        border: 1px solid #DDD;
        width: 311px;
        height: 28px;
        margin: 8px auto;
        font: 14px/28px Arial;
        text-indent: 5px;
        color: #858585;
        background: #FFF;
    }
    .windowForm .confirmBtn {
        padding-top: 15px;
    }

    .windowForm .button-confirm {
        position: relative;
        border: 1px solid #1FA9FF;
        border-radius: 2px;
        text-align: center;
        color: #FFF;
        background: #1FA9FF;
        box-sizing: content-box;
    }

    .windowForm .button-confirm:hover {
        color: #FFF;
        background: #3D8CD9;
    }

    .windowForm .confirmBtn a {
        display: inline-block;
        border-radius: 3px;
        width: 100%;
        height: 34px;
        font: 14px/34px "PingFangSC-Regular", "HelveticaNeue-Light", "Helvetica Neue Light", "Microsoft YaHei", "sans-serif";
        vertical-align: middle;
        letter-spacing: normal;
        word-spacing: normal;
    }
</style>
{/block}

{block name="body"}
    <div class="content-wrapper">
        <div class="sign-wrapper">
            <div class="login-wrapper">
                <div class="login-header">
                    <h4 class="login-title">账号登录</h4>
                </div>
                <form action="javascript:" id="form">
                    <div class="login-body">
                        <div class="input-group">
                        <span class="input-group-addon">
                            <i class="fa fa-user"></i>
                        </span>
                            <input type="text" class="form-control" placeholder="请输入用户名" name="username">
                        </div>
                        <div class="input-group">
                        <span class="input-group-addon">
                            <i class="fa fa-lock"></i>
                        </span>
                            <input type="password" class="form-control" placeholder="请输入密码" name="password">
                        </div>
                        <div class="form-inline clearfix">
                            <input type="text" class="form-control" placeholder="请输入验证码" style="width:45%;float:left;margin-right:2%;" name="captcha_code">
                            <img src="{:captcha_src()}" alt="验证码" onclick="refreshVerify()" class="verify-img" style="width:50%;float:left;">
                        </div>

                        <button class="btn btn-info form-control" id="login">登 录</button>
                        <div class="login-footer">
                            <a class="pull-left" href="{:url('pc/register/index')}">立即注册</a>
                            <a id="forget-password" class="pull-right" href="#">忘记密码？</a>
                        </div>
                    </div>
                </form>
                <div id="sendEmailWrapper" class="windowForm">
                    <form id="sendEmailForm">
                        <p>邮箱地址</p>
                        <p class="mb20">
                            <input class="longInput" type="email" name="email" value="">
                        </p>
                        <div class="confirmBtn">
                            <a id="sendEmailConfirm" class="button-confirm" href="javascript:">确定</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
{/block}
{block name="pluginsJs"}{/block}
{block name="script"}
<script>
    function refreshVerify() {
        var ts = Date.parse(new Date()) / 1000;
        $(".verify-img").attr('src', '/captcha?id=' + ts);
    }
    refreshVerify();

    $(function () {
        // 屏幕缩放监听
        $(window).on('resize', function () {
            $('.sign-wrapper').css('min-height', ($(window).height() - 147) + 'px')
        }).trigger('resize');

        //登录点击事件
        $('#login').click(function(){
            var username = $("input[name='username']").val();
            var password = $("input[name='password']").val();
            if(username==''){
                layer.msg('请输入姓名');
                return false;
            }
            if(password==''){
                layer.msg('请输入密码');
                return false;
            }
            var formData = $('#form').serialize();
            $.ajax({
                url: "{:url('pc/login/login')}",
                type: 'post',
                data: formData,
            }).done(function (response) {
                if (response.status) {
                    layer.msg(response.message, {icon: 1},function(){
                        window.location.href = response.url;
                    });
                } else {
                    refreshVerify();
                    layer.msg(response.message);
                }
            }).fail(function () {
                console.error('立即报名请求失败！');
            });
        });

        // 忘记密码
        $('#forget-password').on('click', function () {
            layer.open({
                type: 1,
                title: '重置密码将发送至邮箱中',
                area: ['auto'],
                content: layui.jquery('#sendEmailWrapper')
            });
        });

        var validator = new Validator('sendEmailForm', [
            {
                name: 'email',
                display: '请输入邮箱地址|请输入正确的邮箱地址',
                rules: 'required|is_email',
            },
        ], function (obj, evt) {
            //如果errors具有内容则表示验证不通过
            if (obj.errors.length) {
                $.each(obj.errors, function (index, item) {
                    layer.tips(item.message, $('#sendEmailForm').find('[name="' + item.name + '"]'), {
                        tips: [2, '#00B4E9'],
                        tipsMore: true
                    });
                });
            }
        });

        $('#sendEmailWrapper').on('click', '#sendEmailConfirm', function () {
            if(!validator.validate().errors.length) {
                var email = $('#sendEmailWrapper').find('[name="email"]').val();
                $.ajax({
                    url: "{:url('pc/login/resetPassword')}",
                    type: 'post',
                    data: {
                        email: email
                    }
                }).done(function (response) {
                    if (response.status) {
                        layer.closeAll();
                        layer.msg('发送成功！');
                        $('#sendEmailWrapper').find('[name="email"]').val('');
                    } else {
                        layer.msg(response.message);
                    }
                }).fail(function () {
                    console.error('重置密码发送失败！');
                });
            }
        });

    });
</script>
{/block}